<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item>产品管理</el-breadcrumb-item>
    <el-breadcrumb-item>产品列表</el-breadcrumb-item>
  </el-breadcrumb>

  <el-table :data="proList" style="width: 100%">
    <el-table-column prop="proname" label="产品名称" />
    <el-table-column label="产品图片">
      <template #default="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.img1"
          :preview-src-list="[scope.row.img1]"
          fit="cover"
          :preview-teleported="true"
        />
      </template>
    </el-table-column>
    <el-table-column prop="category" label="产品分类" />
    <el-table-column prop="brand" label="产品品牌" />
    <el-table-column prop="originprice" label="产品价格" />
    <el-table-column prop="discount" label="产品折扣" />
    <el-table-column label="是否售卖">
      <template #default="scope">
        <el-switch
          v-model="scope.row.issale"
          :active-value="1"
          :inactive-value="0"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button>编辑</el-button>
        <el-button type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    background
    layout="sizes, prev, pager, next"
    :total="total"
    @current-change="currentChange"
    @size-change="sizeChange"
  />
</template>

<script setup lang="ts">
import { ref, onMounted, watch, watchEffect } from "vue";
import { getProApi } from "@/api/pro";

const proList = ref([]);
const total = ref<number>(0);
// 当前第几页
const page = ref<number>(1);
// 一页多少条
const size = ref<number>(10);

// const getData = async () => {
//   const res: any = await getProApi({
//     count: page.value,
//     limitNum: 10,
//   });
//   // console.log(res);
//   if (res) {
//     proList.value = res.data;
//     total.value = res.total;
//   }
// };
// onMounted(() => {
//   getData();
// });
// watch(page, () => {
//   getData();
// });
const currentChange = (n: number): void => {
  page.value = n;
};
const sizeChange = (n: number): void => {
  size.value = n;
};

watchEffect(async () => {
  const res: any = await getProApi({
    count: page.value,
    limitNum: size.value,
  });
  // console.log(res);
  if (res) {
    proList.value = res.data;
    total.value = res.total;
  }
});
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 20px;
  justify-content: center;
}
</style>
